<template>
    <div>
        <el-tabs v-model="filetype" @tab-click="filetypeChange"  >
            <el-tab-pane v-for="(item, index) in Tabs" :key="item.title" :label="item.title" :name="item.title"></el-tab-pane>
        </el-tabs>
        <el-table :data="recoderfilesTrue"  border  :empty-text="showemptytext" :row-class-name="tableRowClassName">
            <el-table-column  width="65" label="标识" :show-overflow-tooltip='true' align="center">
                <template slot-scope="scope">
                    <img class="default-image" :src="$store.state.images.wujiaoxing" style="width：45px;height:45px;"> 
                </template> 
            </el-table-column>
            <el-table-column type="index" width="80" label="序号"  :index="indexbf" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
            <el-table-column v-for="(item, index) in columns.normal" :prop="item.prop" :width="item.width" :label="item.label"  :show-overflow-tooltip='true' align="center"> </el-table-column>
            <el-table-column 
                v-if="columns.showstatus.show==true" 
                :prop="columns.showstatus.prop"
                :width="columns.showstatus.width" 
                :label="columns.showstatus.label"  
                :show-overflow-tooltip='true' align="center" 
                :filters="[{ text: '未办', value: '未办' }, { text: '待办', value: '待办' }, { text: '已办', value: '已办' }]"  
                :filter-method="filterTag"  
                filter-placement="bottom-end"  
            ></el-table-column>
            <el-table-column  :width="columns.showcontent.width" :label="columns.showcontent.label"  :show-overflow-tooltip='true' align="center" v-if="columns.showcontent.show==true">
                <template slot-scope="scope">
                    <a target="_blank" :href="scope.row[columns.showcontent.prop]">点击内容查看</a>
                </template> 
            </el-table-column>
            <el-table-column :width="columns.showcontent.width" :label="columns.showcontent.label" :show-overflow-tooltip='true' align="center" v-if="columns.showdownload.show==true">
                <template slot-scope="scope">
                    <a target="_blank" :href="scope.row[columns.showdownload.prop]">点击内容下载</a>
                </template> 
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-button  size="mini"    @click="serchfile">查询</el-button>
                    <el-button  size="mini"  @click="addfile" v-show="showAdd">新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-dropdown trigger="click" @command="fileCommand">
                        <span class="el-dropdown-link">操作<i class="el-icon-caret-bottom el-icon--right"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'delete'}">删除</el-dropdown-item>
                            <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'changestatus'}">状态</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <pagination @changed="showDataTrue" :recoder="recoderfiles"> </pagination>
        <zzlihuifileadd ref='zzlihuifileadd' v-on:editResult="serchfile"></zzlihuifileadd>
        <changestatus ref='changestatus' v-on:editResult="serchfile"></changestatus>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        props:{
            Tabs:Array,
        },
        data: () => ({
            showAdd:false,//显示添加的按钮,
            Filerecode:'',
            filetype:'',//文件分类 默认from
            columns:{
                normal:[],
                showstatus:{
                    show:true,
                    prop:'status',
                    width:'125',
                    label:'办理状态',
                },
                showcontent:{
                    show:true,
                    prop:'content',
                    width:'125',
                    label:'内容查看',
                },
                showdownload:{
                    show:true,
                    prop:'truesrc',
                    width:'125',
                    label:'内容下载',
                }
            },
            recoderfiles:[], //获取到的文件
            recoderfilesTrue:[],//真正在表格里面显示的 由于分页等原因
            offset:0,
            default_emptytext:"请点击右侧查询记录",
            showemptytext:'',

        }),
        mounted() {
            if(this.GetUser()==false){
                this.$router.push("/");
            }
            this.GetActiveDwId_DzbId();
            if (this.$store.state.Dw_DzbID.dwid==-1) {
                if(this.$store.state.user.operation==0){
                    this.showAdd=true;
                }
            }
            else if(this.$store.state.Dw_DzbID.dzbid==-1){
                if(this.$store.state.user.operation<=1){
                    this.showAdd=true;
                }
            }
            else if(this.$store.state.Dw_DzbID.dzbid>-1 && this.$store.state.Dw_DzbID.dzbid>-1){
                if(this.$store.state.user.operation<=2){
                    this.showAdd=true;
                }
            }
        },
        watch: {
            "Tabs":{
                handler(){
                    if(this.Tabs.length>0){
                        this.filetype=this.Tabs[0].title;
                    }
                },
                deep:true
            },
        },
        components: {
            zzlihuifileadd: function(resolve) {require(["./fileadd.vue"], resolve);},
            changestatus: function(resolve) {require(["./changestatus.vue"], resolve);},
        },
        methods: {
            ...mapActions(['GetUser','GetActiveDwId_DzbId']),
            filetypeChange(tab){
                this.filetype=tab.name;
                this.serchfile();
            },
            serchfile(){
                this.recoderfiles=[];
                let _this=this;
                let postdata={
                    type:"getfilerecoder",
                    split:JSON.stringify({
                        recoder:_this.Filerecode,//纪录Recod
                        filetype:_this.filetype,//纪录Recod
                    })
                }
                _this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    if(e.FileRecods.length==0){
                        _this.showemptytext='没有找到记录';
                        setTimeout(() => {
                            _this.showemptytext=_this.default_emptytext;
                        }, 1000);
                    }
                    else{
                        _this.recoderfiles=e.FileRecods; 
                    }
                }).catch(function(reason) {
                    console.log('catch:', reason);
                });
            },
            addfile(){
                this.$refs.zzlihuifileadd.$data.rowdata.recoder = this.Filerecode;
                this.$refs.zzlihuifileadd.$data.rowdata.filetype = this.filetype;
                this.$refs.zzlihuifileadd.$data.detailsVisible = true;
            },
            filterTag(value, row) {
                return row.status === value;
            },
            showDataTrue(showrecoders,offset){
                this.recoderfilesTrue=showrecoders;
                this.offset=offset;
            },
            indexbf(index){return index+this.offset+1;},
            fileCommand(value){
                let row=value.data;
                let typed=value.typed;
                let _this=this;
                if(typed=="delete"){
                    let postdata={
                        type:"deletefilerecoder",
                        split:JSON.stringify({
                            recoderfile:row.recoderfile,
                        })
                    }
                    this.$Common.AjaxPost(postdata,true)
                    .then(function(e){
                         _this.$message('删除成功');
                         _this.serchfile();
                    })
                }
                else if(typed=="changestatus"){
                    this.$refs.changestatus.$data.rowdata.name = row.name;
                    this.$refs.changestatus.$data.rowdata.bianhao = row.bianhao;
                    this.$refs.changestatus.$data.rowdata.recoderfile = row.recoderfile;
                    this.$refs.changestatus.$data.rowdata.status = row.status;
                    this.$refs.changestatus.$data.detailsVisible = true;
                }
            },
            tableRowClassName({row, rowIndex}) {
                if (row.status === '已办') {
                    return 'success-row';
                
                } else if (row.status === '未办') {
                    return 'warning-row';
                }
                else if (row.status === '待办') {
                    return 'warning-row';
                }
            }
        }
    }
</script>
<style>
  .el-table .warning-row {
    background: #e0dcd8;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>